<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <ol>
                <!--
                  现在我们为每个 todo-item 提供 todo 对象
                  todo 对象是变量，即其内容可以是动态的。
                  我们也需要为每个组件提供一个“key”，稍后再
                  作详细解释。
                -->
                <todo-item
                  v-for="item in groceryList"
                  v-bind:todo="item"
                  v-bind:key="item.id">
                </todo-item>
            </ol>
        </div>
        <script type="text/javascript">
            // 定义名为 todo-item 的新组件
            Vue.component('todo-item', {
                // todo-item 组件现在接受一个
                // "prop"，类似于一个自定义 attribute。
                // 这个 prop 名为 todo。
                props: ['todo'],
                template: `<li>{{ todo.text }}</li>`
            })
            var app = new Vue({
                el: '#app',
                data: {
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '随便其它什么人吃的东西' }
                    ]
                }
            })
        </script>
    </body>
</html>